/**
 * 路由配置文件 - router/index.ts
 * 这个文件配置了整个应用的页面路由
 * 路由就像是网站的地图，告诉浏览器不同的网址应该显示哪个页面
 */

// 导入Vue Router相关功能
import { createRouter, createWebHistory } from 'vue-router'  // 创建路由器和历史模式
import type { RouteRecordRaw } from 'vue-router'  // 路由记录的类型定义

/**
 * 路由配置数组
 * 定义了应用中所有的页面路由
 * 每个路由对象描述了一个页面的访问规则
 */
const routes: RouteRecordRaw[] = [
  {
    path: '/',                    // 根路径（网站首页）
    redirect: '/workspace'        // 重定向到工作台页面
  },
  {
    path: '/workspace',           // 工作台页面路径
    name: 'Workspace',           // 路由名称，用于编程式导航
    component: () => import('@/views/Workspace.vue'),  // 懒加载组件（按需加载）
    meta: {
      title: '工作台'            // 页面标题，用于设置浏览器标签页标题
    }
  },
  {
    path: '/preview',            // 预览页面路径
    name: 'Preview',             // 路由名称
    component: () => import('@/views/Preview.vue'),    // 懒加载预览组件
    meta: {
      title: '预览'              // 页面标题
    }
  }
]

/**
 * 创建路由器实例
 * 使用HTML5的History模式（URL不会有#号）
 */
const router = createRouter({
  history: createWebHistory(),   // 使用HTML5 History API
  routes                        // 路由配置
})

/**
 * 全局路由守卫
 * 在每次路由跳转前执行，用于设置页面标题
 * 这样每个页面都会有对应的浏览器标签页标题
 */
router.beforeEach((to) => {
  // 设置页面标题：优先使用路由meta中的title，否则使用默认标题
  document.title = (to.meta?.title as string) || 'Vue拖拽数据大屏'
})

// 导出路由器实例，供main.ts使用
export default router